require('../css/commCss/normalize.css')
require('../css/commCss/reset.css')
require('../css/commCss/property.css')
require('../css/commCss/basic.css')

// 确认验证码是否正确
const axios=require('axios')

// weui-轻提示
require('weui')
const weui= require('weui.js')

require('../css/modify.less')

window.addEventListener('DOMContentLoaded',function(){

    let sex=document.querySelector('#sex')
    let city=document.querySelector('#city')
    let modifyBtn=document.querySelector('#modifyBtn')
    let iconImg=document.querySelector('#iconImg')
    let Nameinput=document.querySelector('#js_input1')
    let birthday=document.querySelector('#birthday')
    let province=document.querySelector('#province')
    let sign=document.querySelector('#sign')
    let curNum=document.querySelector('#curNum')
  
    // 直接获取信息
    let Id=localStorage.getItem('userId')
    axios.get('http://139.9.177.51:8099/users/accountinfo?userId='+Id)
    .then(function(res){
        let info=res.data.data
        // iconImg.src=info.imgurl;
        // console.log(res.data.data);
        Nameinput.value=info.nickname

        if(info.imgurl){
            iconImg.src=info.imgurl
        }

        if(info.gender){
            sex.textContent=info.gender
        }

        if(info.birthday){
            birthday.textContent=info.birthday.substr(0,10)
        }

        if(info.address){
            province.textContent=info.address.split(",")[0]
            city.textContent=info.address.split(",")[1]
        }

        if(info.sign){
            sign.value=info.sign
            // 文本域的字数限制
            curNum.textContent=sign.value.length
        }

        })
        
    // 动态数字计算
    sign.addEventListener('input',function(){
        // alert(1)
        curNum.textContent=this.value.length
    })

    // 返回上一页
    document.querySelector('#modify-back').addEventListener('click',function(){
        history.go(-1)
    })

    // 性别
    document.querySelector('#sexPicker').addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            onConfirm: function (result) {
                // console.log(result[0].label);
                sex.textContent=result[0].label
            },
            title: '选择性别'
        });
    });

    let dataArr=[]
    let cityArr=[]
    // 联动所有省
    axios.get("http://139.9.177.51:8099/address/province")
    .then(function(res){
        let data=res.data.data;
        dataArr=data.map(function(item){
            return {label:item.name,value:item.addressId}
        })
        // console.log(dataArr);
    })
    // {addressId: 110000, name: '北京市', pid: 0}
    // {label: '湖北省',value: 0}
    // 省
    document.querySelector('#proPicker').addEventListener('click', function () {
        weui.picker(dataArr, {
            onConfirm: function (result) {
                // console.log(result[0].label);
                province.textContent=result[0].label

                let pid=result[0].value
                // 所在省的所有城市
                axios.get("http://139.9.177.51:8099/address/city/"+pid)
                    .then(function(res){
                        let data=res.data.data;
                        cityArr=data.map(function(item){
                            return {label:item.name,value:item.addressId}
                        })
                    // console.log(cityArr);
                    // 方式一：
                    // city.textContent="请选择"
                    // 方式二：
                    city.textContent=cityArr[0].label
                })
            },
            title: '选择省份'
        });
    });

    // 城市
    document.querySelector('#cityPicker').addEventListener('click', function () {
        weui.picker(cityArr, {
            onConfirm: function (result) {
                console.log(result[0].label);
                city.textContent=result[0].label
            },
            title: '选择城市'
        });
    });

    // 补零函数
    function fillZero(n){
        return n<9? "0"+n:n
    }

    // 生日
    document.querySelector('#birthdayPicker').addEventListener('click', function () {
        weui.datePicker({
            start: new Date().getFullYear()-80,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                let str=[result[0].value,fillZero(result[1].value),fillZero(result[2].value)].join('-');
                document.querySelector('#birthday').textContent=str
            },
            title: '选择生日'
        });
    });

    // 头像
    document.querySelector('#fileImg').addEventListener('change',function(){
        let file=this.files[0]
        // console.log(file);
        
        // 新建fromdata的对象
        // formdata传递文件数据；二进制上传方式
        let fd=new FormData()
        fd.append('imgurl',file)
        // console.log(fd);
        axios.post('http://139.9.177.51:8099/users/upload',fd)
        .then(function(res){
            // console.log(res.data.data);
            if(res.data.status===1){
                weui.toast(res.data.msg,2000)
            }else{
                document.querySelector('#iconImg').src='http://139.9.177.51:8099'+res.data.data
            }
        })
        
    })

    document.querySelector('#iconImg').addEventListener('click',function(){
        fileImg.click()
    })

    // 修改信息
    modifyBtn.addEventListener('click',function(){
        let arr={
            imgurl:iconImg.src,
            nickname:Nameinput.value,
            gender:sex.textContent,
            birthday:birthday.textContent,
            address:[province.textContent,city.textContent],
            sign:sign.value,
            userId:localStorage.getItem('userId')
        }
        // console.log(arr);
        axios.post('http://139.9.177.51:8099/users/userEdit',arr)
        .then(function(res){
            if(res.data.status===0){
                // 成功
                weui.toast("修改成功")
                location.href="./mine.html"
            }else{
                // 失败
                weui.alert("修改失败")
            }
        })
    })
})